import { Line } from '@ant-design/charts';
import { useModel } from '@umijs/max';
import { Button } from 'antd';
import React from 'react';
import topLogo from '../../assets/images/123.png';
import styles from './index.module.less';
const TestCP: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  const message = useModel('counter');

  const { initialState } = useModel('@@initialState');

  return (
    <div>
      <img src={topLogo} style={{ width: '300px' }} alt="" />
      <div className={styles.abc}>{initialState?.currentUser?.name}</div>
      <div>{message.counter}</div>
      <Button type="primary" onClick={() => message.increment()} style={{ marginLeft: '30px' }}>
        数量+1
      </Button>
      <Button type="primary" onClick={() => message.decrement()} style={{ marginLeft: '30px' }}>
        数量-1
      </Button>
      <Line {...config} />
    </div>
  );
};

export default TestCP;
